{{extend './layouts/layout.html'}}

{{block 'content'}}
<div class="container-fluid">
  <div class="page-title">
    <h1>导航菜单</h1>
  </div>
  <!-- 有错误信息时展示 -->
  <!-- <div class="alert alert-danger">
    <strong>错误！</strong>发生XXX错误
  </div> -->
  <div class="row">
    <div class="col-md-4">
      <form>
        <h2>添加新导航链接</h2>
        <div class="form-group">
          <label for="text">文本</label>
          <input id="text" class="form-control" name="text" type="text" placeholder="文本">
        </div>
        <div class="form-group">
          <label for="title">标题</label>
          <input id="title" class="form-control" name="title" type="text" placeholder="标题">
        </div>
        <div class="form-group">
          <label for="href">链接</label>
          <input id="href" class="form-control" name="href" type="text" placeholder="链接">
        </div>
        <div class="form-group">
          <button class="btn btn-primary" type="submit">添加</button>
        </div>
      </form>
    </div>
    <div class="col-md-8">
      <div class="page-action">
        <!-- show when multiple checked -->
        <a class="btn btn-danger btn-sm" href="javascript:;" style="display: none">批量删除</a>
      </div>
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr>
            <th class="text-center" width="40"><input type="checkbox"></th>
            <th>文本</th>
            <th>标题</th>
            <th>链接</th>
            <th class="text-center" width="100">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="text-center"><input type="checkbox"></td>
            <td><i class="fa fa-glass"></i>奇趣事</td>
            <td>奇趣事</td>
            <td>#</td>
            <td class="text-center">
              <a href="javascript:;" class="btn btn-danger btn-xs">删除</a>
            </td>
          </tr>
          <tr>
            <td class="text-center"><input type="checkbox"></td>
            <td><i class="fa fa-phone"></i>潮科技</td>
            <td>潮科技</td>
            <td>#</td>
            <td class="text-center">
              <a href="javascript:;" class="btn btn-danger btn-xs">删除</a>
            </td>
          </tr>
          <tr>
            <td class="text-center"><input type="checkbox"></td>
            <td><i class="fa fa-fire"></i>会生活</td>
            <td>会生活</td>
            <td>#</td>
            <td class="text-center">
              <a href="javascript:;" class="btn btn-danger btn-xs">删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
{{/block}}